<script setup lang="ts">


import {ref,defineEmits} from 'vue'
import {uesGroupStore} from '@/stores'
const groupStore = uesGroupStore()
const propos = defineProps({
    item:{
        type:Object,
        default:{}
    },
    parentId:String
})
const emit = defineEmits(['delete'])

let _url:URL = new URL(propos.item.url)
const baseUrl = ref(_url.origin)
const editUrl = ref('')
const editTitle = ref('')

const visible = ref(false)
const startEdit = ()=>{
    visible.value = true;
    editTitle.value = propos.item.title
    editUrl.value = propos.item.url.slice(7)
}
const changeValue = ()=>{
    if(editUrl.value && editTitle.value)
    {
        //@ts-ignore
        groupStore.changeItemUrl(propos.parentId,propos.item.id,'http://' + editUrl.value)
        //@ts-ignore
        groupStore.changeItemTitle(propos.parentId,propos.item.id,editTitle.value)
        _url = new URL(propos.item.url)
        baseUrl.value = _url.origin
        visible.value = false
    }
    else
    {
        //@ts-ignore
        ElMessage.error('你还有内容没输入呢！╯︿╰')
    }
    
}
const cancelEdit = ()=>{
    visible.value = false
}
const deleteItem = ()=>{
    emit('delete',propos.item.id)
}
const keyEnter = (e:any)=>{
    if(e.key === 'Enter')
    {
        changeValue()
    }
}

const jumpTo = ()=>{
    window.location.href = propos.item.url
}
</script>
<template>
    <div class="box" @click="jumpTo">
        <el-popover placement="top-start" title="修改" :width="230" trigger="click" class="popover" :visible="visible">
            <div class="edit">
                <p>URL</p>
                <el-input placeholder="Please input" v-model="editUrl" @keydown="keyEnter">
                    <template #prepend>http://</template>
                </el-input>
                <p>名称</p>
                <el-input placeholder="Please input" v-model="editTitle" @keydown="keyEnter"/>
                <div id="editbutton">
                    <el-button class="button" type="success" @click="changeValue">确定</el-button>
                    <el-button class="button" type="warning" @click="cancelEdit">取消</el-button>
                    <el-button class="button" type="danger" @click="deleteItem">删除</el-button>
                </div>
            </div>
            <template #reference>
                <p class="edit" @click.stop="startEdit">•••</p>
            </template>
        </el-popover>
        <div class="image">
            <img :src="baseUrl + '/favicon.ico'" alt="">
        </div>
        <p class="title">{{propos.item.title}}</p>
    </div>
</template>
<style scoped>
.box
{
    box-sizing: border-box;
    display: flex; /* 设置为flex容器 */
    justify-content: center; /* 主轴对齐方式为居中 */
    align-items: center; /* 交叉轴对齐方式为居中 */
    position: relative;
    height: 80px;
    width: 80px;
    background-color: rgba(102, 102, 102, 0.396);
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(10, 10, 10, 0.747);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2;
}
.box:hover
{
    background-color: rgba(155, 155, 155, 0.396);
}
.box>.edit
{
    margin: 0;
    position: absolute;
    right: 5px;
    top: 0;
    cursor: pointer;
    text-align: right;
    color: rgba(255, 255, 255, 0);
    font-size: 12px;
    transition: all 0.2s;
}
.box:hover>.edit
{
    color: white;
}
.box .image
{
    display: flex; /* 设置为flex容器 */
    justify-content: center; /* 主轴对齐方式为居中 */
    align-items: center; /* 交叉轴对齐方式为居中 */
    margin-bottom: 10%;
    height: 45%;
    width: 45%;
    background-color: white;
    border-radius: 7px;
}
.box .image img
{
    height: 70%;
    width: 70%;
}
.box .title
{
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: 5px;
    text-align: center;
    font-size:16px;
    color: white;
    white-space: nowrap;  /* 不换行 */
    overflow: hidden;
}
#editbutton
{
    margin-top: 10px;
}
</style>